<template>
    <div class="student">
        <p style="color: #606266; font-size: 14px;">
            <i class="el-icon-s-home"></i>
            <span>&nbsp;学生管理</span>
        </p>

        <el-card class="box-card" :body-style="{ padding: '10px 25px' }">
            <div class="header">
                <div>
                    <el-button class="el-icon-plus" size="medium" @click="showAdd">
                        创建
                    </el-button>
                </div>
                <div style="width: 400px; display: flex;">
                    <el-input placeholder="学生姓名" size="medium" v-model="name" style="margin-right: 20px;"></el-input>
                    <el-input placeholder="专业名" size="medium" v-model="majorName"
                        style="margin-right: 20px;"></el-input>
                    <el-input placeholder="班级名" size="medium" v-model="className"
                        style="margin-right: 20px;"></el-input>
                    <el-button class="el-icon-search" type="primary" @click="search" size="medium">搜索</el-button>
                </div>
            </div>

            <div style="text-align: center;">
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page"
                    :page-size="10" layout=" prev, pager, next" :total="total">
                </el-pagination>
            </div>

            <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="学生id">
                </el-table-column>
                <el-table-column prop="number" label="学号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="className" label="班级">
                </el-table-column>
                <el-table-column prop="majorName" label="专业">
                </el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="lastLoginTime" label="上次登录">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="showEdit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delStudent(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <StudentAdd @cancelAdd="handleCancel" @close="handleClose" :key="dialogFormVisible"></StudentAdd>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="editVisible">
            <StudentEdit @cancelAdd="handleCancel" @close="handleClose" :key="editVisible" :editId="this.editId">
            </StudentEdit>
        </el-dialog>
    </div>
</template>

<script>
import StudentAdd from '@/components/admin/StudentAdd.vue';
import StudentEdit from '@/components/admin/StudentEdit.vue';
import { studentDelete, studentGetPage, studentGetPageCount } from '@/api/admin/student';
export default {
    components: { StudentAdd, StudentEdit },
    data() {
        return {
            tableData: [],
            page: 1,
            name: "",
            className: "",
            majorName: "",
            total: 0,
            dialogFormVisible: false,
            editVisible: false,
            editId: "",
            loading: false
        }
    },
    methods: {
        handleCancel() {
            this.dialogFormVisible = false
            this.editVisible = false
        },
        handleClose() {
            this.dialogFormVisible = false
            this.editVisible = false
            this.getList()
        },
        showAdd() {
            this.dialogFormVisible = true
        },
        showEdit(id) {
            this.editId = id
            this.editVisible = true
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
        getPageCount() {
            let params = {
                name: this.name,
                majorName: this.majorName,
                className: this.className
            }
            studentGetPageCount(params).then(res => {
                // console.log(res)
                if (res.code === 0) {
                    this.total = res.data * 10
                }
            })
        },
        getList() {
            this.loading = true
            let params = {
                name: this.name,
                majorName: this.majorName,
                className: this.className
            }
            studentGetPage(params, this.page).then(res => {
                console.log(res)
                if (res.code === 0) {
                    this.tableData = res.data
                }
            }).finally(() => {
                this.loading = false
            })
        },
        search() {
            this.page = 1
            this.getList()
            this.getPageCount()
        },
        delStudent(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                studentDelete(id).then(res => {
                    // console.log(res)
                    if (res.code === 0) {
                        this.$message({
                            type: "success",
                            message: res.data
                        })
                        this.getList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    mounted() {
        this.getPageCount()
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.student {
    height: 100%;



    .box-card {
        width: 100%;
        margin-top: 5px;
        font-size: 14px;



        .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

        }
    }
}
</style>